<template>
  <div>
    <ProTable
      :columns="columns"
      :request="request"
      row-key="id"
      :action-ref="setActionRef"
      :pagination="{ pageSize: 10 }"
      :search="{ collapsed:false }"
      :scroll="{ x: 2600 }"
      header-title=""
    >
    <template #option-render="{ dom }">
      <component :is="dom[1]" />
      <component :is="dom[0]" />
      <a-button v-auth="'exportRefundBtn'" key="search" type="primary" @click="exportHandle">导出</a-button>
    </template>
    </ProTable>
    <a-modal v-model:visible="visible" title="退款详情" @ok="handleModalOk" :width="800">
      <a-descriptions title="退款详情" bordered>
        <a-descriptions-item label="退款单号">{{ detail?.returnNo }}</a-descriptions-item>
        <a-descriptions-item label="退款金额">{{ detail?.returnPrice }}</a-descriptions-item>
        <a-descriptions-item label="状态">{{ detail?.status }}</a-descriptions-item>
        <a-descriptions-item label="发起时间">{{ detail?.createTime }}</a-descriptions-item>
        <a-descriptions-item label="发起人">{{ detail?.createUserName }}</a-descriptions-item>
        <a-descriptions-item label="需求人">{{ detail?.demandPersonName }}</a-descriptions-item>
        <a-descriptions-item label="服务订单编号">{{ detail?.serviceNo }}</a-descriptions-item>
        <a-descriptions-item label="用户ID">{{ detail?.demandPersonUserId }}</a-descriptions-item>
        <a-descriptions-item label="服务单类型">{{ detail?.productType }}</a-descriptions-item>
        <a-descriptions-item label="服务项目">{{ detail?.serviceItem }}</a-descriptions-item>
        <a-descriptions-item label="商品总金额">{{ detail?.orderPrice }}</a-descriptions-item>
        <a-descriptions-item label="实际收金额">{{ detail?.payPrice }}</a-descriptions-item>
        <a-descriptions-item label="支付时间">{{ detail?.payTime }}</a-descriptions-item>
      </a-descriptions>
    </a-modal>
    <a-modal :width="1000" v-model:visible="deleteVisible">
      <a-descriptions title="退款详情" bordered>
        <a-descriptions-item label="退款单号">{{refund?.returnNo || '无'}}</a-descriptions-item >
        <a-descriptions-item label="退款金额">{{refund?.payPrice}}</a-descriptions-item>
        <a-descriptions-item label="备注">{{refund?.returnRemark}}</a-descriptions-item>
        <a-descriptions-item label="状态">
         {{refund?.status === -1 ? '已拒绝' : refund?.status === 1 ? '已提交' : '已通过'}}
        </a-descriptions-item>
        <a-descriptions-item label="发起时间">{{refund?.createTime}}</a-descriptions-item >
        <a-descriptions-item label="发起人">{{refund?.createUserName || '无'}}</a-descriptions-item >
        <a-descriptions-item label="需求人">{{refund?.demandPersonName}}</a-descriptions-item >
        <a-descriptions-item label="服务产品类型">
          {{refund?.productType === 1 ? '保洁' : refund?.productType === 2 ? '搬家' : refund?.productType === 3 ? '保养' : '维修'}}
        </a-descriptions-item >
        <a-descriptions-item label="订单金额">{{refund?.orderPrice}}</a-descriptions-item >
        <a-descriptions-item label="实付金额">{{refund?.payPrice || '无'}}</a-descriptions-item >
        <a-descriptions-item label="支付时间">{{refund?.payTime || '无'}}</a-descriptions-item >

      </a-descriptions>
      <a-divider  />
        <ProcessInstance :processInstanceData="processInstanceData"></ProcessInstance>
    </a-modal>
  </div>
</template>
<script setup lang="tsx">
import { ref } from 'vue';
import { getRefundList, getRefundDetail, deleteRefund,getRefundApprovalInfo, getRefundInfo } from '@/api/refund'; // 替换为你的 API 路径
import { ProColumns } from "@arco-vue-pro-components/pro-components/es/pro-table";
import { Modal, Button, Descriptions, DescriptionsItem } from '@arco-design/web-vue';
import ProcessInstance from '@/components/ProcessInstance/ProcessInstance.vue';
const actionRef = ref();
const setActionRef = (ref) => {
  actionRef.value = ref;
};

const deleteVisible = ref(false);
const visible = ref(false);
const detail = ref({
  returnNo: '',
  returnPrice: '',
  status: '',
  createTime: '',
  createUserName: '',
  demandPersonName: '',
  serviceNo: '',
  demandPersonUserId: '',
  productType: '',
  serviceItem: '',
  orderPrice: '',
  payPrice: '',
  payTime: '',
});
const processInstanceData = ref([]);
const refund = ref({})

const handleViewDetail = async (id: number) => {
  const response = await getRefundDetail(id);
  if (response) {
    detail.value = response;
    visible.value = true;
  }
};

const handleModalOk = () => {
  visible.value = false;
};
const viewDetail = async (id) => {
  console.log(id)
  const data = await getRefundInfo(id)
  
  refund.value = data
 const res = await getRefundApprovalInfo(id)

 processInstanceData.value = res 
  deleteVisible.value = true
};
const handleDelete = async (id: number) => {
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除这条退款记录吗？',
    onOk: async () => {
      const response = await deleteRefund(id);
      console.log(response,'-response')
      if (response.success) {
        console.log('删除成功');
        console.log( actionRef.value)
        actionRef.value.reload(); // 刷新表格数据
      }
    },
  });
};

const request = async (params: any) => {
  const response = await getRefundList(params);
  return {
    data: response.data.list,
    total: response.data.total,
    success: true,
  };
};

const exportHandle = async () => {
  window.open('/service//demandReturn/downloadReturnExcel');
};

const columns: ProColumns[] = [
  {
    title: '退款单号',
    dataIndex: 'returnNo',
    key: 'returnNo',
    ellipsis: true,
  },
  {
    title: '服务订单编号',
    dataIndex: 'serviceNo',
    key: 'serviceNo',
    ellipsis: true,
  },
  {
    title: '需求人',
    dataIndex: 'demandPersonName',
    key: 'demandPersonName',
    hideInSearch: true,
  },
  {
    title: '用户ID',
    dataIndex: 'demandPersonUserId',
    key: 'demandPersonUserId',
    hideInSearch: true,
  },
  {
    title: '服务单类型',
    dataIndex: 'productType',
    key: 'productType',
    hideInSearch: true,
    valueEnum: {
      1: { text: '保洁' },
      2: { text: '搬家' },
      3: { text: '保养' },
      4: { text: '维修' },
    },
  },
  {
    title: '退款金额',
    dataIndex: 'returnPrice',
    key: 'returnPrice',
    valueType: 'money',
    hideInSearch: true,
  },
  {
    title: '服务项目',
    dataIndex: 'serviceItem',
    key: 'serviceItem',
    hideInSearch: true,
  },
  {
    title: '商品总金额',
    dataIndex: 'orderPrice',
    key: 'orderPrice',
    valueType: 'money',
    hideInSearch: true,
  },
  {
    title: '实际收金额',
    dataIndex: 'payPrice',
    key: 'payPrice',
    valueType: 'money',
    hideInSearch: true,
  },
  {
    title: '支付时间',
    dataIndex: 'payTime',
    key: 'payTime',
    hideInSearch: true,
  },
  {
    title: '退款金额',
    dataIndex: 'returnPrice',
    key: 'returnPrice',
    valueType: 'money',
    hideInSearch: true,
  },
  {
    title: '退款状态',
    dataIndex: 'status',
    key: 'status',
    valueEnum: {
      '-1': { text: '已拒绝', status: 'Error' },
      '1': { text: '已提交', status: 'Processing' },
      '2': { text: '已通过', status: 'Success' },
    },
  },
  {
    title: '发起时间',
    dataIndex: 'createTime',
    key: 'createTime',
    valueType: 'dateTime',
    hideInSearch: true,
  },
  {
    title: '发起人',
    dataIndex: 'createUserName',
    key: 'createUserName',
  },
  {
    title: '开始时间',
    dataIndex: 'startDate',
    key: 'startDate',
    valueType: 'dateTime',
    hideInTable: true,
  },
  {
    title: '结束时间',
    dataIndex: 'endDate',
    key: 'endDate',
    valueType: 'dateTime',
    hideInTable: true,
  },
  {
    title: '操作',
    key: 'option',
    dataIndex: 'option',
    hideInSearch: true,
    fixed: 'right',
    render: ({ record }) => (
      <>
        <Button v-auth="refundDetailBtn" type="text" onClick={() => handleViewDetail(record.id)}>查看</Button>
        <Button  type="text" onClick={() => viewDetail(record.id)}>退款详情</Button>
        {/* <Button v-auth="refundDelBtn" type="text" status="danger" onClick={() => handleDelete(record.id)} style={{ marginLeft: 8 }}>删除</Button> */}
      </>
    ),
  },
];
</script>